<template>
  <div class="app">
    <n-config-provider :theme-overrides="themeOverrides">
      <TopNav class="topnav"/>
      <n-message-provider>
        <div class="app-main">
          <router-view/>
        </div>
      </n-message-provider>
      <Footer class="footer"/>
    </n-config-provider>
  </div>
</template>

<script setup>
import { NMessageProvider, NConfigProvider } from 'naive-ui'
import TopNav from '@/components/TopNav'
import Footer from '@/components/Footer'

const themeOverrides = {
  common: {
    primaryColor: '#661AE6',
    primaryColorHover: '#661AE6',
  },
  Input: {
    borderHover: '#661AE6',
  }
}

</script>

<style>
h1,p {
  margin: 0;
}

:root {
  --lrWhite: 30px;
  --settingTitleFontSize: 24px;
  --settingBorderColor: rgb(224,224,230);
}
.app-main {
  padding-top: 20px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

</style>
